import React from 'react'
import {WeaColorPicker, WeaSearchGroup, WeaFormItem, WeaLocaleProvider,WeaInputNumber} from 'ecCom'

import {Button,Icon,Row,Col} from 'antd'
const getLabel = WeaLocaleProvider.getLabel;
class Style extends React.Component{

    render(){
        return(
            <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@xboycb`} showGroup={true}>
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@azfqfk`} label={"字体颜色"} labelCol={{span: 4}} wrapperCol={{span: 20}}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ysz8n3`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@37xeyw`} span={12}>
                            <div style={{width:"65px",display:"inline-block","vertical-align":'middle'}}>标题:</div>
                            <div style={{width:"100px","display":"inline-block","vertical-align":'middle'}}>
                                <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@5lbbss`} value={this.props.data.setting.titleColor}
                                                onChange = {(value) => this.props.setStateData({titleColor:value})}
                                />
                            </div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@hnmfjd`} span={12}>
                            <div style={{width:"65px","display":"inline-block","vertical-align":'middle'}}>内容:</div>
                            <div style={{width:"100px","display":"inline-block","vertical-align":'middle'}}>
                                <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@boozxz`} value={this.props.data.setting.textColor}
                                                onChange = {(value) => this.props.setStateData({textColor:value})}
                                />
                            </div>
                        </Col>
                    </Row>
                </WeaFormItem>
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@t8xsbh`} label={"字体大小"} labelCol={{span: 4}} wrapperCol={{span: 20}}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@d0xm6p`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@xe8s16`} span={12}>
                            <div style={{width:"65px",display:"inline-block","vertical-align":'middle'}}>标题:</div>
                            <div style={{width:"100px","display":"inline-block","vertical-align":'middle'}}>
                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@zswz6m`} value={this.props.data.setting.titleFontSize}
                                                onChange = {(value) => this.props.setStateData({titleFontSize:value})}
                                />
                            </div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vxhih0`} span={12}>
                            <div style={{width:"65px","display":"inline-block","vertical-align":'middle'}}>内容:</div>
                            <div style={{width:"100px","display":"inline-block","vertical-align":'middle'}}>
                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@30obx4`} value={this.props.data.setting.textFontSize}
                                                onChange = {(value) => this.props.setStateData({textFontSize:value})}
                                />
                            </div>
                        </Col>
                    </Row>
                </WeaFormItem>
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@pulozy`} label={"间距"} labelCol={{span: 4}} wrapperCol={{span: 20}}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@7z1gn9`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ti9ijx`} span={12}>
                            <div style={{width:"65px",display:"inline-block","vertical-align":'middle'}}>内容间距:</div>
                            <div style={{width:"100px","display":"inline-block","vertical-align":'middle'}}>
                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@mg009n`}
                                    value = {this.props.data.setting.textSpacing}
                                    onChange = {(value)=> this.props.setStateData({textSpacing:value})}
                                />
                            </div>

                        </Col>

                    </Row>
                </WeaFormItem>
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@nxsh6i`} label={"背景"} labelCol={{span: 4}} wrapperCol={{span: 20}}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@2a2767`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@zxbark`} span={12}>
                            <div style={{width:"65px",display:"inline-block","vertical-align":'middle'}}>{getLabel(2077,"背景颜色")}:</div>
                            <div style={{width:"100px","display":"inline-block","vertical-align":'middle'}}>
                                <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@h8dp42`} value={this.props.data.bgColor}
                                                onChange = {(value) => this.props.changebgColor(value)}
                                />
                            </div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@m1de88`} span={12}>
                            <div style={{width:"65px","display":"inline-block","vertical-align":'middle'}}>背景透明度:</div>
                            <div style={{width:"100px","display":"inline-block","vertical-align":'middle'}}>
                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@lxcxa8`} value={this.props.data.bgTmd}
                                                onChange = {(value) => this.props.changeBgTmd(value)}
                                />
                            </div>
                        </Col>
                    </Row>
                </WeaFormItem>

            </WeaSearchGroup>
            )

    }
}
export default Style